<template>
  <div class="ai-panel" :class="{ 'collapsed': collapsed }">
    <ai-panel-toggle 
      :collapsed="collapsed" 
      @toggle="$emit('toggle')"
      title="切换 AI 分析面板">
    </ai-panel-toggle>
    
    <div class="panel-content" v-if="!collapsed">
      <div class="panel-header">
        <h3>AI 分析结果</h3>
      </div>
      
      <div class="panel-body">
        <div v-if="results && results.length" class="results-list">
          <div v-for="(result, index) in results" :key="index" class="result-item">
            <div class="result-header">
              <span class="result-title">{{ result.title }}</span>
              <span class="result-confidence">{{ formatConfidence(result.confidence) }}</span>
            </div>
            <div class="result-description">{{ result.description }}</div>
          </div>
        </div>
        <div v-else class="placeholder-text">
          <i class="el-icon-data-analysis"></i>
          <p>AI 分析结果将在此显示</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AiPanelToggle from './AiPanelToggle.vue'

export default {
  name: 'AiPanel',
  components: {
    AiPanelToggle
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    results: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatConfidence(value) {
      if (value === undefined || value === null) return '';
      const percent = (value * 100).toFixed(1);
      return `${percent}%`;
    }
  }
}
</script>

<style scoped>
.ai-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  background-color: #1e2538;
  transition: width 0.3s ease;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
  z-index: 90;
}

.ai-panel.collapsed {
  width: 30px;
}

.panel-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.panel-body {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.placeholder-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.placeholder-text i {
  font-size: 48px;
  margin-bottom: 10px;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-item {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 10px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.result-title {
  font-weight: bold;
  color: #409EFF;
}

.result-confidence {
  font-size: 12px;
  color: #67C23A;
  background: rgba(103, 194, 58, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
}

.result-description {
  font-size: 13px;
  color: #ddd;
  line-height: 1.4;
}
</style>
